<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Demo: Custom Widget</title>
		<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dijit/themes/claro/claro.css" media="screen">
		<!-- Load up Dojo -->
		<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true">
		</script>
		<script>
			require(["dijit/form/Button","dojo/parser","dojo/ready","dijit/layout/TabContainer","dijit/layout/ContentPane","dijit/layout/BorderContainer","dojo/dom"]);
		</script>
		<script>
			
			function loadData() {
				loadCompanyData();
				loadPeopleData();
			}
			
			function loadCompanyData() {
				require(["dojo/_base/xhr"], function(xhr) {
					xhr.get({
						url: './companyData.json',
						handleAs: 'json',
						load: function(result) {
								handleWidgetData(result,'company');
						}
					});
				});
			}
			function loadPeopleData() {
				require(["dojo/_base/xhr"], function(xhr) {
					xhr.get({
						url: './peopleData.json',
						handleAs: 'json',
						load: function(result) {
								handleWidgetData(result,'people');
						}
					});
				});
			}
			function handleWidgetData(data,type) {
				var currentTab = "";
				for(var x in data){
					var backgroundColor= x%2 == 0 ? 'lightblue' :'lightgrey'
					var currLayout = '<div style="border:lightgrey solid 1px; background-color: '+ backgroundColor +'">'; 
					var current = data[x];
					currLayout = currLayout + '<br><b>' + current.name + '</b><br>';
					currLayout = currLayout + current.details + '<br></div>';
					currentTab = currentTab + currLayout;
				}
				
				if(type == "company") {
					dojo.byId("companyBuzzData").innerHTML = currentTab;
				}
				else{
					dojo.byId("peopleBuzzData").innerHTML = currentTab;
				}
			}
		</script>
	</head>
	<body class="claro" onload="javascript:loadData();">
		<div style="padding: 30px; border: lightgrey solid 1px; width: 200px;">
				<h2>InsideView Widget</h2>
				<div class="centerPanel" id="mainTabs" data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region: 'center', tabPosition: 'top'" style="width:200px;height:300px">
					<div data-dojo-type="dijit.layout.ContentPane" title="Company" style="width:170px;height:300px">
						Company Buzz
						<div id="companyBuzzData"></div>
					</div>
					<div data-dojo-type="dijit.layout.ContentPane" title="People" style="width:170px;height:300px">
						People Buzz
						<div id="peopleBuzzData"></div>
					</div>
				</div>
		</div>
	</body>
</html>
		
